<template>
  <view>
    <web-view :style="{
      height: `calc(100vh - ${height})`
    }" v-if="src" :src="src"/>
    <fixed-bottom class="fixed-bottom" bg-color="#fff" :is-fixed="true">
      <view class="p-30 flex-row-reverse yy">
        <view class="xmm flex-center m-l-20" @click="show = true">重命名</view>
        <view class="sc flex-center" @click="show_sc = true">删除</view>
      </view>
    </fixed-bottom>


    <u-popup :show="show" round="24rpx" mode="center">
      <view class="w-560 h-382 p-t-30 p-b-30" style="box-sizing: border-box">
        <view class="flex-center font-32 font-weight-500">重命名</view>
        <view class="flex-center m-t-58">
          <input class="w-432 h-80 radius-16 p-l-24 p-r-24" v-model="name" placeholder="输入文件新名称" style="background: #FBF8F8;box-sizing: border-box"/>
        </view>
        <view class="flex-center m-t-60">
          <view class="qx flex-center" @click="show = false">取消</view>
          <view class="qd flex-center m-l-32" @click="edit">确定</view>
        </view>
      </view>
    </u-popup>

    <u-popup :show="show_sc" round="24rpx" mode="center">
      <view class="w-560 h-382 p-t-30 p-b-30" style="box-sizing: border-box">
        <view class="flex-center font-32 font-weight-500">温馨提示</view>
        <view class="flex-center m-t-78">
          确认删除吗？
        </view>
        <view class="flex-center m-t-80">
          <view class="qx flex-center" @click="show_sc = false">取消</view>
          <view class="qd flex-center m-l-32" @click="deleteFile">确定</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {fileToBlobUrl} from "../../../utils/file-picker";

export default {
  data() {
    return {
      show:false,
      show_sc:false,
      id: '',
      src:'',
      name:'',
      height: 0
    };
  },
  onLoad(ops) {
    this.id = ops.id
    this.getDetail()
  },
  onReady() {
    // #ifdef H5
    this.height = document.querySelector('.fixed-bottom').clientHeight + 44 + 'px'
    // #endif
  },
  methods: {
    onlinePreview(url) {
      return `https://csfs.guoruiyu.cn/onlinePreview?url=${encodeURIComponent(btoa(url))}`
    },
    async getDetail(){
      const res = await this.$api.common.user("getFileInfo",{
        id: this.id
      })
      this.src = this.onlinePreview(res.data.file_url)
      this.name = res.data.file_name
      uni.setNavigationBarTitle({
        title: res.data.file_name,
      })
    },
    async edit(){
      await this.$api.common.user("doUpload",{
        file_name: this.name,
        id: this.id
      })
      this.show = false
      this.getDetail()
    },
    async deleteFile(){
      await this.$api.common.user("delete",{
        id: this.id
      })
      this.show_sc = false
      this.goBack()
    }
  },
}
</script>

<style lang="scss">
.xmm{
  width: 172rpx;
  height: 80rpx;
  background: linear-gradient( 117deg, #FE515F 0%, #FB2D19 20%, #FB2D19 59%, #FC7916 100%);
  border-radius: 20rpx;
  color: #fff;
}

.sc{
  width: 172rpx;
  height: 80rpx;
  background: #ECECEC;
  border-radius: 20rpx;
  color: #4D4D4D;
}

.yy{
  box-shadow: 0rpx -4rpx 16rpx 0rpx rgba(0,0,0,0.1);
}

.qx{
  width: 200rpx;
  height: 80rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
  border: 2rpx solid #FB2D19;
  font-weight: 400;
  font-size: 28rpx;
  color: #FB2D19;
}

.qd{
  width: 200rpx;
  height: 80rpx;
  background: linear-gradient( 117deg, #FE515F 0%, #FB2D19 20%, #FB2D19 59%, #FC7916 100%);
  border-radius: 20rpx;
  color: #FFFFFF;
  font-size: 28rpx;
}
</style>
